
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css综合任务1</title>
</head>
<body>
<h1>css综合任务1</h1>
<div id="header">
<ul class="picture">

<div id="div01">
    <a href="./格式化文本/格式化文本.html">
    <img src="./图层 11.png" class="img"><br>
    </a>
<p>格式化文本</p>
</div>

<div id="div02">
    <a href="./设置颜色和背景/颜色和背景首页.html">    
    <img src="./图层 23.png" class="img"><br>
    </a>
<p>设置颜色和背景</p>
</div>

<div id="div03">
    <a href="./制作奖状/首页.html">   
         <img src="./图层 15.png" class="img"><br>
    </a>
<p>制作奖状</p>
</div>

<div id="div04">
    <a href="https://gitee.com/liu-meixi_0/css-comprehensive-task-1">   
        <img src="./图层 12.png" class="img"><br>
    </a>
<p>仓库地址</p>
</div>

<div id="div05">
    <a href="./选择器和盒子模型/选择器和盒子模型首页.html">    
        <img src="./图层 2.png" class="img"><br>
    </a>
<p>选择器和盒子模型</p>
</div>
</ul>
</div>

<style>
    body{
    background:url("./图层 21.png");background-attachment: fixed;
    background-size: cover;
    }
    h1{
    text-align: center;
    color:rgb(255, 255, 255);
    line-height: 180px;
    margin: -2% 0;
    }
    p{
    color:rgb(253, 253, 253);
    margin: 5% 24%;
    }

    div{
    width: 250px;
    height: 250px;
    }
    
    #header{
    width: 1190px;
    }

    #div01{
        margin: -6% 60%;
    }
    #div02{
        margin: -10% 85%;
    }
    #div03{
        margin: 6% 15%;
    }
    #div04{
        margin: -20% 85%;
    }
    #div05{
        margin: -53% 28%;
    }

    img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    }

    .picture :hover{
    transform:scale(1.1);
    }
    
    </style>
</body>
</html>

